<template>
	<view class="footer-space">
		<uni-forms :value="formData" ref="form" border validate-trigger="bind" err-show-type="undertext">
			<uni-section class="pub-title" title="保单详情" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub">
				<uni-forms-item label="投保单号">
					<uni-easyinput type="text" v-model="policy.applyPolicyNo" placeholder="" :inputBorder="false" disabled/>
				</uni-forms-item>
				<uni-forms-item label="保费">
					<uni-easyinput type="text" v-model="policy.totalNetPremium" placeholder="" :inputBorder="false" disabled/>
				</uni-forms-item>
				<uni-forms-item label="生效日期">
					<uni-easyinput type="text" :value="shengxrq" :inputBorder="false" disabled />
				</uni-forms-item>
				<uni-forms-item label="截止日期">
					<uni-easyinput type="text" :value="jiezrq" :inputBorder="false" disabled />
				</uni-forms-item>
			</uni-card>
			
			<uni-section class="pub-title" title="被保险人信息" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub">
				<uni-forms-item label="姓名">
					<uni-easyinput type="text" v-model="formData.name2" placeholder="请输入姓名" :inputBorder="false" disabled/>
				</uni-forms-item>
				<uni-forms-item label="证件类型">
					<picker id="zhengjlx2" v-model="formData.zhengjlx2" :range="zhengjlx" disabled>
						<view class="uni-input">{{zhengjlx[index_zhengjlx2]}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="证件号码">
					<uni-easyinput type="text" v-model="formData.zhengjhm2" placeholder="请输入证件号码" :inputBorder="false" disabled/>
				</uni-forms-item>
				<uni-forms-item label="手机号码">
					<uni-easyinput type="text" v-model="formData.mobile2" placeholder="请输入手机号码" :inputBorder="false" disabled/>
				</uni-forms-item>
			</uni-card>
			
			<view class="footer bg-white pad10 ">
				<view class="wid100 clearfix">
					<button class="orange-button rad50" @click="submitForm('form')">支付</button>
				</view>
			</view>
		</uni-forms>
	</view>
</template>
<script>
	import html2canvas from 'html2canvas';
	import moment from "moment"

	export default {
		data() {
			return {
				kehs_uuid: null,
				policy: null,
				order: null,
				shengxrq: "",
				jiezrq: "",
				formData: {
					name2: "",
					zhengjlx2: "",
					zhengjhm2: "",
					mobile2: "",
					
				},
				zhengjlx: ['身份证'],
				index_zhengjlx2: 0,
				
			}
		},
		onLoad(option) {
			let that = this

			this.policy = JSON.parse(option.policy)

			this.shengxrq = moment().add(1, 'days').format("YYYY-MM-DD") + " 00:00:00"
			this.jiezrq = moment().add(1, 'years').format("YYYY-MM-DD") + " 23:59:59"

			uni.getStorage({
				key: 'order',
				success: function (res) {
					that.order = res.data

					that.formData.name2 = that.order.beibxrXm
					that.formData.zhengjhm2 = that.order.beibxrZjhm
					that.formData.mobile2 = that.order.beibxrsj
				},
				fail(error) {
					console.log(error)
				}
			});

			uni.getStorage({
				key: 'kehs_uuid',
				success: function (res) {
					that.kehs_uuid = res.data
				},
				fail(error) {
					console.log(error)
				}
			});
		},
		onReady() {
			
		},
		methods: {
			blobToDataURI(blob, callback) {
				var reader = new FileReader();
				reader.onload = function (e) {
					callback(e.target.result);
				}
				reader.readAsDataURL(blob);
			},
			
			submitForm: function(form) {
				let that = this
				let inputData = that.order
				inputData.baof = that.policy.totalNetPremium
				inputData.toubdh = that.policy.applyPolicyNo
				inputData.kehs = that.kehs_uuid

				that.$refs[form].submit().then(res => {
					// 截屏传到后台
					html2canvas(document.body, {
						useCORS: true, 
						allowTaint: false, 
						windowWidth: document.body.scrollWidth, 
						windowHeight: document.body.scrollHeight,
						scale: 1}).then(function(canvas) {

						canvas.toBlob(function(blob) {
							that.blobToDataURI(blob, function (base64) {
								uni.request({
									url: getApp().globalData.baseUrl + "/kehsjl",
									method: "POST",
									data: {uuid: that.kehs_uuid, type: 3, jiep: "<img src=\"" + base64 + "\"/>"},
									success: (res) => {
										console.log(res)
									}
								})
							});
						});
					});

					uni.showLoading({
						title: '计算中...'
					});
					uni.request({
						url: getApp().globalData.baseUrl + "/zhifu",
						data: inputData,
						success: (res) => {
							uni.hideLoading()

							if (res.data.success) {
								// webview安全级别太高，不允许任意跳转页面.所以用 location.href
								location.href = "http://www.ruiysoft.com/tianp_pay.html?toubdh=" + that.policy.applyPolicyNo

							} else {
								uni.showToast({
									title: '支付异常: ' + res.data.message,
									duration: 2000
								});
							}
						}
					});
				})
				.catch(errors => {
					console.error('验证失败：', errors)
				})
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>
